<template>
  <div id="contentBox">
    <div class="searchBox">
      <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="96px">
        <el-form-item label="申请时间起" prop="startDate">
          <el-date-picker :editable="false" v-model="searchForm.startDate" type="date" placeholder="选择日期" :picker-options="startDateOpt"
            @change="debounceSeach">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请时间止" prop="endDate">
          <el-date-picker :editable="false" v-model="searchForm.endDate" type="date" placeholder="选择日期" :picker-options="endDateOpt"
            @change="debounceSeach">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单号" prop="orderNumber">
          <el-input v-model="searchForm.orderNumber" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input>
        </el-form-item>
        <el-form-item label="经销商名称" prop="dealerName">
          <el-input v-model="searchForm.dealerName" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input>
        </el-form-item>
        <el-form-item label="汽车车型" prop="carBrandNameAndCarName">
          <el-input v-model="searchForm.carBrandNameAndCarName" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input>
        </el-form-item>




        <el-form-item label="订单状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择订单状态" @change="debounceSeach">
            <el-option label="请选择订单状态" value=""></el-option>
            <el-option v-for="(item, index) in orderTypeMap" :label="item" :value="index" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流状态" prop="logisticsInfoStatus">
          <el-select v-model="searchForm.logisticsInfoStatus" placeholder="请选择物流状态" @change="debounceSeach">
            <el-option label="请选择物流状态" value=""></el-option>
            <el-option v-for="(item, index) in logisticsStatusMap" :label="item" :value="index" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="验车状态" prop="carInspectionInfoStatus">
          <el-select v-model="searchForm.carInspectionInfoStatus" placeholder="请选择验车状态" @change="debounceSeach">
            <el-option label="请选择验车状态" value=""></el-option>
            <el-option v-for="(item, index) in carInspectionStatusMap" :label="item" :value="index" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保证金状态" prop="depositInfoStatus">
          <el-select v-model="searchForm.depositInfoStatus" placeholder="请选择保证金状态" @change="debounceSeach">
            <el-option label="请选择保证金状态" value=""></el-option>
            <el-option v-for="(item, index) in cashDepositStatusMap" :label="item" :value="index" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="">
          <el-button @click="resetSearchForm('searchForm')">重置</el-button>
          <el-button @click="exportExcels(searchForm,'car_order_cancel/export','垫资取消')">导出</el-button>

        </el-form-item>
      </el-form>
    </div>
    <div id="tableBox">
      <el-table :data="tableData.data" border >
        <el-table-column label="订单号" fixed width='200'>
          <template scope="scope">
            <span>{{ scope.row.orderNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经销商名称" :width='250'>
          <template scope="scope">
            <span>{{ scope.row.dealerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="汽车车型" :width='250'>
          <template scope="scope">
            <span>{{ scope.row.carBrandNameAndCarName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="垫资金额">
          <template scope="scope">
            <span>{{ scope.row.paymentAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template scope="scope">
            <span v-for='(key,value) in scope.row.carOrderStatusVO' :key='key'>{{ value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="物流状态">
          <template scope="scope">
            <span v-for='(key,value) in scope.row.logisticsInfoStatusVO' :key='key'>{{value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="验车状态">
          <template scope="scope">
            <span v-for='(key,value) in scope.row.carInspectionInfoStatusVO' :key='key'>{{ value}}</span>
          </template>
        </el-table-column>
        <el-table-column label="保证金状态">
          <template scope="scope">
            <span v-for='(key,value) in scope.row.cashDepositInfoStatusVO' :key='key'>{{value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" :width='250'>
          <template scope="scope" >
            <span>{{ scope.row.addTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="200" fixed="right">
          <template scope="scope">
            <el-button size="small" @click="handleSee('查看', scope.row)">查看</el-button>
            <el-button size="small" v-if='scope.row.status!=-4' @click="handleSee('取消', scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog  title="订单取消管理" v-if="dialogSendData.dialogFormVisible" :visible.sync="dialogSendData.dialogFormVisible"  :lock-scroll='true' top=5% :close-on-click-modal="false" :closeOnPressEscape="false">
				<edit  v-if="dialogSendData.dialogFormVisible" v-on:Refresh="seachData()" :dialogSendData="dialogSendData"></edit>
	    </el-dialog>

      <div class="block" style="text-align: center;margin-top: 15px;position:relative;">
		    <pagination v-on:refreshSeachData="seachData()"  :tableData="tableData" :searchForm="searchForm"></pagination>
		</div>
    </div>

  </div>
</template>
<script src="./index.js">
</script>
